<template>
  <div class="base-table-container">
    <el-table
      :data="props.data || []"
      v-loading="props.loading"
      style="width: 100%; height: 100%"
      size="default"
      stripe
      border
      :cell-style="{ padding: '3px 1px' }"
      :header-cell-style="{
        background: 'var(--primary-color, #409eff)',
        color: 'white',
        padding: '3px 1px',
        position: 'sticky',
        top: 0,
        zIndex: 2,
        fontWeight: '600',
        fontSize: '14px'
      }"
      @sort-change="handleSortChange"
    >
      <!-- 动态列渲染 -->
      <template v-for="(col, index) in visibleColumns" :key="col.prop">
        <el-table-column
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :min-width="col.minWidth || col.minwidth"
          :sortable="col.sortable || false"
          :fixed="col.fixed"
          :align="col.align || 'left'"
        >
          <!-- 自定义列内容 -->
          <template #default="scope">
            <template v-if="col.slot">
              <slot :name="col.slot" :row="scope.row" :$index="scope.$index" v-bind="scope"></slot>
            </template>
            <span v-else-if="col.prop === 'actions'">
              <!-- 操作列 -->
              <slot name="actions" :row="scope.row" :$index="scope.$index" v-bind="scope"></slot>
            </span>
            <span v-else>{{ scope.row[col.prop] || '' }}</span>
          </template>
        </el-table-column>
      </template>

    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch, nextTick } from 'vue'

const props = defineProps({
  tableName: {
    type: String,
    default: ''
  },
  columns: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(col => 
        typeof col.prop === 'string' &&
        typeof col.label === 'string'
      )
    }
  },
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  sort: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['sort-change', 'update:columns'])

// 可见列计算
const visibleColumns = computed(() => {
  console.log('BaseTable visibleColumns computed - props.columns:', props.columns)
  const filtered = props.columns.filter(col => 
    col.prop && 
    typeof col.prop === 'string' &&
    (col.visible === undefined || col.visible !== false)
  )
  console.log('BaseTable visibleColumns computed - filtered:', filtered)
  return filtered
})

// 监听列变化
watch(() => props.columns, (newColumns) => {
  console.log('BaseTable columns changed:', newColumns)
}, { deep: true })

// 处理排序变化
const handleSortChange = (column) => {
  if (!column.prop) return
  
  emit('sort-change', {
    field: column.prop,
    order: column.order
  })
}
</script>

<style scoped>
.base-table-container {
  width: 100%;
  min-height: 300px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  box-sizing: border-box;
}

/* 确保表格占满容器 */
.base-table-container :deep(.el-table) {
  width: 100%;
  min-height: 300px;
  max-width: 100%;
  flex: 1;
  box-sizing: border-box;
}

/* 表头冻结效果 */
:deep(.el-table__header-wrapper) {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 确保表格内容可见并提供滚动 */
:deep(.el-table__body-wrapper) {
  flex: 1;
  overflow: auto;
  min-height: 200px;
}

/* 表格容器滚动条样式 */
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: #f1f1f1;
  border-radius: 4px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: #c1c1c1;
  border-radius: 4px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: #a8a8a8;
}
</style> 